<!--
 * @Author: ryo
 * @Date: 2021-11-20 23:12:17
 * @LastEditors: ryo
 * @LastEditTime: 2021-11-26 17:28:45
 * @Description: 产品中心组件
 * @FilePath: \site\src\views\product\Home.vue
-->
<template>
  <div class="product">
    <!-- 轮播图 -->
    <m-carousel></m-carousel>
    <!-- 产品中心 -->
    <v-container fluid class="mb-15 mt-10 box">
      <v-row justify="center" align="center">
        <v-col>
          <div class="box_title">
            <div class="h2">产品中心</div>
            <div class="caption">Product Center</div>
          </div>
        </v-col>
      </v-row>
      <v-row justify="start" align="center">
        <v-col
          cols="12"
          sm="6"
          md="4"
          v-for="product in productModel.list"
          :key="product.id"
        >
          <v-card
            class="mx-auto"
            max-width="370"
            flat
            outlined
            :to="{ name: 'ProductDetail', params: { id: product.id } }"
          >
            <v-img :src="product.img" max-width="370"></v-img>
            <v-card-title class="justify-center body-1 text-truncate">
              {{ product.text }}
            </v-card-title>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
// 组件
import mCarousel from '@/components/common/Carousel.vue';
// 常量
import constant from '@/const';

export default {
  name: 'Product',
  components: {
    mCarousel
  },
  data() {
    return {
      productModel: {
        list: constant.product.products
      }
    };
  },
  methods: {
    /**
     * @description: 跳转到产品详情页
     * @param {*} id
     * @return {void}
     */
    handleRedirectDetail({ id }) {
      this.$router.push({
        name: 'ProductDetail',
        params: {
          id
        }
      });
    }
  }
};
</script>

<style></style>
